<%--=========================================================================== 
This is the page directive. Sets the content type and encoding.
Encoding of the response: UTF-8
Encoding of this JSP page: Cp1251 
===========================================================================--%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="Cp1251"%>
<%@ taglib uri="/WEB-INF/st4" prefix="st"%>


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Start Page</title>
<link rel="stylesheet" type="text/css" href="styles/st4.css" />
<link rel="stylesheet" type="text/css" href="styles/jquery-ui.css" />

<jsp:include page="/WEB-INF/includes/scripts.jsp" />

<script type="text/javascript">

	function doSubmit(){
		if (validateForm()){
		document.dataForm.submit();
		}
	}
	
	function validateForm()
	{
		var errorMessage='';
		
		// Checks if date is selected
		var x=document.forms["dataForm"]["departuredate"].value;
		if (x==null || x=="")
	  	{
	 		errorMessage+=("You must input departure date");
	 	}
		
		// Checks if date is selected
		var x=document.forms["dataForm"]["returndate"].value;
		if ((x==null || x=="") && document.getElementById('round').checked)
	  	{
	 		errorMessage+=("<br/>You must input return date");
	 	}
		
		var from=document.forms["dataForm"]["fromAirport"].value;
		var to=document.forms["dataForm"]["toAirport"].value;
		if (from==to)
	  	{
	 		errorMessage+=("<br/>Wrong destination");
	 	}
		// Checks if date is not in the past
		var sendDate = document.getElementById('datepicker1').value;
		sendDate = new Date(Date.parse(sendDate));
		today = new Date();
		today.setHours(0,0,0,0);
		if (sendDate < today) {
			console.log("Wrong date");
			//errorMessage+=('<br/>The  date can\'t be in the past. Please pick another date.');
		} 
	
		if (errorMessage!=''){
			createPopupError(errorMessage+'<br/>');
			return false;
		}
		else {
			return true;
		}
	}
		
	function disableReturnDate(){
		$("#datepicker2").attr("value","");
		$("#datepicker2").attr("Disabled","true");
	}
	
	function enableReturnDate(){
		$("#datepicker2").removeAttr("disabled");
	}

	$(document).ready(function() {

   		$("#datepicker1,#datepicker2").datepicker({
      		monthNames:[
      		            "<st:i18n key="calendar.months.january" />",
      		          	"<st:i18n key="calendar.months.february" />",
      		        	"<st:i18n key="calendar.months.march" />",
      		      		"<st:i18n key="calendar.months.april" />",
      		    		"<st:i18n key="calendar.months.may" />",
      		    		"<st:i18n key="calendar.months.june" />",
      		    		"<st:i18n key="calendar.months.july" />",
      		    		"<st:i18n key="calendar.months.august" />",
      		    		"<st:i18n key="calendar.months.september" />",
      		    		"<st:i18n key="calendar.months.october" />",
      		    		"<st:i18n key="calendar.months.november" />",
      		    		"<st:i18n key="calendar.months.december" />",
      		            ],
      		dayNamesMin:[
						"<st:i18n key="calendar.dayNamesMin.sunday" />",
						"<st:i18n key="calendar.dayNamesMin.monday" />",
						"<st:i18n key="calendar.dayNamesMin.tuesday" />",
						"<st:i18n key="calendar.dayNamesMin.wednesday" />",
						"<st:i18n key="calendar.dayNamesMin.thursday" />",
						"<st:i18n key="calendar.dayNamesMin.friday" />",
						"<st:i18n key="calendar.dayNamesMin.saturday" />",
						],
      		firstDay:1,
      		dateFormat:"dd.mm.yy"
   		});
   		
   	 	$("#but").button();

	});
</script>

</head>
<body>
	<c:if test="${not empty param.error}">
		<script type="text/javascript">createPopupError('${param.error}');</script>
	</c:if>
	<table class="page">

		<%--========================================================================--%>
		<jsp:include page="/WEB-INF/includes/header.jsp" />
		
		<jsp:include page="/WEB-INF/includes/menu.jsp" />
		<%--========================================================================--%>

		<tr class="content">
			<td align="center">
				<h2>
					<st:i18n key="pages.choose_direction" />
				</h2> <st:i18n key="pages.select_details" />
				<form action="controller" method="get" name="dataForm">

					<input type="hidden" name="command" value="airportDatePointChoice" />
					<table class="table" style="font: Arial, Helvetica, sans-serif;">

						<tr>
							<td colspan="2">
							
								<input type="radio" name="type" id="single" value="single"  onclick="disableReturnDate()"/>Single flight
								<input type="radio" name="type" id="round" value="return" onclick="enableReturnDate()" CHECKED/> Round trip
							
							</td>
						</tr>

						<tr>
							<td><b><st:i18n key="pages.from" /></b></td>
							<td><b><st:i18n key="pages.to" /></b></td>
						</tr>

						<tr>
							<td><select name="fromAirport">
									<c:forEach var="item" items="${airportsList}">
										<c:out value="<option value=\"${item.id}\"> ${item.airportCity} ${item.airportName}" escapeXml="false">
										Nothing found
										</c:out>
									</c:forEach>
							</select></td>

							<td><select name="toAirport">
									<c:forEach var="item" items="${airportsList}">
										<c:out value="<option value=\"${item.id}\"> ${item.airportCity} ${item.airportName}" escapeXml="false">
										Nothing found
										</c:out>
									</c:forEach>
							</select></td>
						</tr>

						<tr>
							<td><b><st:i18n key="pages.departure_date" /></b></td>
							<td><b><st:i18n key="pages.return_date" /></b></td>		
						</tr>
						
						<tr>
							<td><input id="datepicker1" name="departuredate" type="text" size="15"/></td>
							<td><input id="datepicker2" name="returndate" type="text" size="15"/></td>
						</tr>
						
						<tr>
							<td colspan="2">
								Search flight for day before and day after <input type="checkbox" name="type" value="single"/>
							</td>
						</tr>

					</table>

					<br/> <input id = "but" type="button" value="<st:i18n key="button.next"/>" onclick="doSubmit();" />
				
				</form>

			</td>
		</tr>

		<%--========================================================================--%>
		<jsp:include page="/WEB-INF/includes/footer.jsp" />
		<%--========================================================================--%>

	</table>
</body>
</html>